<template>
  <layout title="sticky吸顶">
    <view class="sticky-demo-container">
      <tn-sticky :custom-navbar-height="customNavbar.height">
        <view class="sticky-block tn-bg-orange">普通吸顶</view>
      </tn-sticky>

      <tn-sticky :custom-navbar-height="customNavbar.height" top="100">
        <view class="sticky-block tn-bg-indigo" style="margin-top: 200px;">带距离吸顶</view>
      </tn-sticky>

      <tn-sticky :enabled="false" :custom-navbar-height="customNavbar.height">
        <view class="sticky-block tn-bg-blue" style="margin-top: 100px;">不吸顶</view>
      </tn-sticky>
    </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSticky from '@/tuniao-ui/components/tn-sticky/src/Sticky.vue'

// 获取自定义顶部导航栏的高度
import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'

const { customNavbar } = useSystemInfo()

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>

.sticky-demo-container {
  height: 2000px;
}
.sticky-block {
  width: 100%;
  height: 60rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
